<template>
  <div>
    <div class="bg-banner" />
    <div id="login-box">
      <div class="login-banner" />
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        autocomplete="on"
        label-position="left"
      >
        <div class="title-container">
          <h3 class="title">{{ title }}管理后台</h3>
        </div>
        <div>
          <el-form-item prop="mobileNumber">
            <el-input
              ref="name"
              v-model="loginForm.mobileNumber"
              placeholder="手机号"
              type="text"
              tabindex="1"
              autocomplete="on"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              ref="pwd"
              v-model="loginForm.pwd"
              type="password"
              placeholder="密码"
              tabindex="2"
              autocomplete="on"
              @keyup.enter="handleLogin"
            ></el-input>
          </el-form-item>
        </div>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%"
          @click.prevent="handleLogin"
          >登 录</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {onMounted} from 'vue';
import { useRouter } from 'vue-router'
export default {
  name: "Login",
  setup() {
    onMounted(() => {
      var token = localStorage.getItem("token");
      const router = useRouter()
      //如果已经有token了，自动跳转到主界面
      if (token) {        
        router.push({name:"main"});
      }
    })
    return {};
  },
  data() {
    return {
      title: "商品",
      loginForm: {
        mobileNumber: "",
        pwd: "",
      },
      loginRules: {
        mobileNumber: [
          { required: true, trigger: "blur", message: "请输入手机号" },
        ],
        pwd: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
        ],
      },
      loading: false
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          axios
            .get("http://localhost:8090/user/login", { params: this.loginForm })
            .then((res) => {
              this.loading = false;
              //存储token
              if (res.data.code == 200) {
                //输出成功
                this.$message.success("登录成功");
                setTimeout(() => {
                  localStorage.setItem("token", res.data.data);
                  this.$router.push({name:"main"});
                }, 500);
              } else {
                console.log(res);
                this.$message.error(res.data.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
[data-mode="mobile"] {
  #login-box {
    max-width: 80%;
    .login-banner {
      display: none;
    }
  }
}
:deep(input[type="pwd"]::-ms-reveal) {
  display: none;
}
.bg-banner {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}
#login-box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 5px #999;
  .login-banner {
    width: 300px;
    background-size: cover;
    background-position: center center;
  }
  .login-form {
    width: 450px;
    padding: 50px 35px 30px;
    overflow: hidden;
    .svg-icon {
      vertical-align: -0.35em;
    }
    .title-container {
      position: relative;
      .title {
        font-size: 22px;
        color: #666;
        margin: 0 auto 30px;
        text-align: center;
        font-weight: bold;
      }
    }
  }
  :deep(.el-input) {
    height: 48px;
    line-height: inherit;
    width: 100%;
    input {
      height: 48px;
    }
    .el-input__prefix {
      left: 10px;
    }
    .el-input__suffix {
      right: 10px;
    }
  }
  .flex-bar {
    display: flex;
    justify-content: space-between;
  }
  .el-checkbox {
    margin: 20px 0;
  }
}
.copyright {
  position: absolute;
  bottom: 30px;
  width: 100%;
  margin: 0;
  mix-blend-mode: difference;
}
</style>
